<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test">
			<form action="" method="post">
				<div>
					<h1>爱好</h1>
					<!--多个input-->
					<input type="checkbox" id="jack" value="0" v-model="hobby">
					<label for="jack">看书</label>
					
					<input type="checkbox" id="john" value="1" v-model="hobby">
					<label for="john">唱歌</label>
					
					<input type="checkbox" id="mike" value="2" v-model="hobby">
					<label for="mike">跑步</label>
					<p>{{hobby}}</p>
				</div>
				<div>
					<h1>年龄</h1>					
					<label  v-for='item in ages' ><input type="radio" name="age" v-bind:value='item' v-model='age'  v-bind:id='item' />{{item}}</label>
					<p>{{age}}</p>
				</div>
				<div>
					<template v-for='(item,index) in tests' >
						
						<label v-bind:for='item.name'>
							<input type="checkbox" v-bind:id='item.name' v-bind:value='item.id' v-model="test" />
							{{item.name}}
							
						</label>
					</template>
					<input type="text" value="不可修改"  />
					<select name="" v-model='name' v-bind:disable='isAdmin'>
						<option value="a">1</option>
						<option value="b">2</option>
						<option value="c">3</option>
						<option value="d">4</option>
					</select>
				<p>{{test}}</p>
				</div>
			</form>
			
		</div>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="../vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#test',
				data:{
					hobby:[0],
					ages:['0-10','11-20','21-30','31-40'],
					age:'0-10',
					tests:[],
					test:[],
					isAdmin:0,
					value:1
				},
				mounted:function(){
					this.tests = [{name:'aaa',id:'1'},{name:'bbb',id:'2'},{name:'ccc',id:'3'}]
					
				}
			})
			
//var arr = new Array(3)
//arr[0] = "George"
//arr[1] = "John"
//arr[2] = "Thomas"
//
//document.write(arr.join())
		</script>
	</body>
</html>
